<template>
  <div class="cjdiv">
    <div v-if="showtjsb" class="mianConntent">
      <el-table
        :data="filteredData"
        ref="table"
        @selection-change="handleSelectionChange"
        :height="tableHeight"
        @row-click="tz"
        responsive
        :header-cell-style="{
          'text-align': 'left',
          color: '#000',
          'border-color': '#ccffff',
          background: '#CCFFFF',
        }"
        :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
      >
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">
            <span v-if="scope.$index + 1 < 10"> 00{{ scope.$index + 1 }}</span>
            <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
              >0{{ scope.$index + 1 }}</span
            >
            <span v-if="scope.$index + 1 > 99"> {{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <span v-if="show">{{ scope.row.name }}</span>
            <el-input v-else v-model="scope.row.name"></el-input>
          </template>
          <template slot="header">
            场景类型
            <!-- 点击搜索框7 -->
            <el-popover placement="bottom" trigger="click">
              <SceneTypeinput />
              <i
                @click="elpopover"
                slot="reference"
                class="el-icon-caret-bottom"
              ></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <el-select
              class="sgcj"
              v-show="show"
              v-model="scope.row.type"
              filterable
              placeholder="请选择"
              disabled
            >
              <el-option
                v-for="item in createSceneData.typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-show="!show"
              v-model="scope.row.type"
              filterable
              placeholder="请选择"
              disabled
            >
              <el-option
                v-for="item in createSceneData.typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column>
          <template slot="header">
            场景名称
            <!-- 点击搜索框6 -->
            <el-popover placement="bottom" trigger="click">
              <SceneNameinput @filtergeneralname="filtergeneralnameTable" />
              <i
                @click="elpopover"
                slot="reference"
                class="el-icon-caret-bottom"
              ></i>
            </el-popover>
          </template>
          <template scope="scope">
            <span v-show="show">{{ scope.row.scene_name }} </span>
            <el-input
              v-show="!show"
              v-model="scope.row.scene_name"
              @change="changeSceneName(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            所在空间
            <!-- 点击搜索框6 -->
            <el-popover placement="bottom" trigger="click">
              <LocationSpaceinput />
              <i
                @click="elpopover"
                slot="reference"
                class="el-icon-caret-bottom"
              ></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <el-select
              class="interspace"
              disabled
              v-show="show"
              style="width: 100%"
              v-model="scope.row.scene_area_id"
              filterable
              placeholder="--"
            >
              <el-option
                v-for="item in options"
                :key="item.area_id"
                :label="item.name"
                :value="item.area_id"
              >
              </el-option>
            </el-select>
            <el-select
              v-show="!show"
              style="width: 100%"
              v-model="scope.row.scene_area_id"
              filterable
              placeholder="请选择"
              @change="changeDevInfo(scope.row)"
            >
              <el-option
                v-for="item in options"
                :key="item.area_id"
                :label="item.name"
                :value="item.area_id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="address2" width="95">
          <template slot="header">
            <el-button @click="saveGroup">{{
              show ? "编辑" : "保存"
            }}</el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              @change="cc"
              @click.native.stop="cc"
              @click="execScene(scope.row)"
              type="primary"
              size="mini"
              v-if="show === true ? true : false"
              >执行</el-button
            >

            <el-button
              v-if="show === true ? false : true"
              @change="cc"
              @click.native.stop="cc"
              type="text"
              size="mini"
              @click="duplicate(scope.row)"
              >复制</el-button
            >
            <el-button
              v-if="show === true ? false : true"
              @click="addsb(scope.row)"
              type="text"
              size="mini"
              >详情</el-button
            >
          </template>
        </el-table-column>

        <!-- 复选框 -->
        <el-table-column
          v-if="show === true ? false : true"
          type="selection"
          width="60"
          @selection-change="handleSelectionChange"
        >
          <template slot="header"> </template>
        </el-table-column>
      </el-table>

      <el-button
        v-if="show === true ? false : true"
        style="position: fixed; left: 260px; bottom: 2%"
        @click="cancelSave"
        >取消保存</el-button
      >

      <div class="button">
        <el-button v-show="!show" type="info" @click="deleteColumns()"
          >删除场景</el-button
        >
        <el-button type="primary" @click="establish()">创建场景</el-button>
      </div>
    </div>

    <!-- 设备详情 -->
    <div v-if="showsbxq">
      <div class="hzding">
        <el-row type="flex">
          <el-col :span="3">
            <span
              style="
                display: block;
                margin-top: 3px;
                margin-left: 15px;
                display: block;
                text-align: left;
              "
            >
              <span
                ><i class="el-icon-location-outline"></i>
                <el-select
                  class="interspace"
                  disabled
                  style="white-space: nowrap; margin-top: -10px"
                  v-model="DetailData.scene_area_id"
                  filterable
                  placeholder="--"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.area_id"
                    :label="item.name"
                    :value="item.area_id"
                  >
                  </el-option>
                </el-select>
              </span>
            </span>
          </el-col>
          <el-col style="font-size: 24px; font-family: 600" :span="4">{{
            SceneName
          }}</el-col>
          <el-col :span="6">设备数量：{{ sceneDetails.length }}</el-col>
          <el-col :span="12"
            >照明渐变(s)：{{ DetailData.fade_time / 10 }}</el-col
          >

          <el-col :span="2">
            <el-button type="primary" @click="SaveChanges"> 保存 </el-button>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>

      <div class="tbs">
        <el-table
          :header-cell-style="{
            'text-align': 'left',
            color: '#000',
            'border-color': '#ccffff',
            background: '#CCFFFF',
          }"
          border
          @row-click="saved"
          style="width: 98%"
          :height="tableHeight2"
          :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
          :data="filteredData1"
          class="noe"
        >
          <el-table-column label="序1号" width="120">
            <template scope="scope">
              <span v-if="scope.$index + 1 < 10">00{{ scope.$index + 1 }}</span>
              <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
                >0{{ scope.$index + 1 }}</span
              >
              <span v-if="scope.$index + 1 > 99">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column width="180">
            <template slot="header">
              所在空间
              <!-- 点击搜索框6 -->
              <el-popover placement="bottom" trigger="click">
                <LocationSpaceinput />
                <i
                  @click="elpopover"
                  slot="reference"
                  class="el-icon-caret-bottom"
                ></i>
              </el-popover>
            </template>
            <template>
              <!-- <span>{{ scope.row.timelines[0].action_id }}</span> -->

              <el-select
                class="interspace"
                disabled
                style="width: 100%"
                v-model="this.DetailData.scene_area_id"
                filterable
                placeholder="--"
              >
                <el-option
                  v-for="item in options"
                  :key="item.area_id"
                  :label="item.name"
                  :value="item.area_id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="name" width="220">
            <template slot="header">
              名称
              <!-- 点击搜索框6 -->
              <el-popover placement="bottom" trigger="click">
                <SceneNameinput @filtergeneralname="filtergeneralnameTable1" />
                <i
                  @click="elpopover"
                  slot="reference"
                  class="el-icon-caret-bottom"
                ></i>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column prop="dev_type" width="220">
            <template slot="header">
              设备类型22
              <!-- 点击搜索框6 -->
              <el-popover placement="bottom" trigger="click">
                <SceneNameinput @filtergeneralname="filtergeneralnameTable4" />
                <i
                  @click="elpopover"
                  slot="reference"
                  class="el-icon-caret-bottom"
                ></i>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column prop="name">
            <template slot="header" slot-scope="">
              <span style="margin-right: 0.5vw">参数</span>
            </template>
            <template scope="scope">
              <!-- 亮度 -->
              <span v-if="scope.row.timelines[0].hasOwnProperty('brightness')"
                >亮度:
                <i class="el-icon-arrow-left" @click="delld(scope.row)"></i>
                <el-input-number
                  style="width: 40px"
                  :max="255"
                  :min="0"
                  :step="1"
                  v-model="scope.row.timelines[0].brightness"
                ></el-input-number>
                <i class="el-icon-arrow-right" @click="addld(scope.row)"></i>
                &nbsp;&nbsp;&nbsp;
              </span>
              <!-- 温度 -->
              <span v-if="scope.row.timelines[0].hasOwnProperty('target_temp')"
                >温度:
                <i class="el-icon-arrow-left" @click="delwd(scope.row)"></i>
                <el-input-number
                  style="width: 40px"
                  :max="32"
                  :min="16"
                  :step="scope.row.timelines[0].target_temp / 10"
                  v-model="scope.row.timelines[0].target_temp"
                ></el-input-number>
                <i class="el-icon-arrow-right" @click="addwd(scope.row)"></i>
                &nbsp;&nbsp;&nbsp;
              </span>
              <!-- 透光度 -->
              <span
                v-if="
                  scope.row.timelines[0].hasOwnProperty('brightness_open_level')
                "
                >透光度:
                <i class="el-icon-arrow-left" @click="deltgd(scope.row)"></i>
                <el-input-number
                  style="width: 40px"
                  :max="100"
                  :min="1"
                  :step="1"
                  v-model="scope.row.timelines[0].brightness_open_level"
                ></el-input-number>
                <i class="el-icon-arrow-right" @click="addtgd(scope.row)"> </i
                >&nbsp;&nbsp;&nbsp;
              </span>
              <!-- 色温 -->
              <span v-if="scope.row.timelines[0].hasOwnProperty('cct')"
                >色温:
                <i class="el-icon-arrow-left" @click="delsw(scope.row)"></i>
                <el-input-number
                  style="width: 40px"
                  :max="5000"
                  :min="2700"
                  :step="1"
                  v-model="scope.row.timelines[0].cct"
                ></el-input-number>
                <i class="el-icon-arrow-right" @click="addsw(scope.row)"> </i
                >&nbsp;&nbsp;&nbsp;
              </span>
              <!-- 模式 -->
              <span v-if="scope.row.timelines[0].hasOwnProperty('air_mode')">
                模式:
                <el-select
                  style="width: 65px"
                  v-model="scope.row.timelines[0].air_mode"
                  placeholder="请选择"
                >
                  <el-option label="制冷" :value="1">制冷</el-option>
                  <el-option label="制热" :value="2">制热</el-option>
                  <el-option label="除湿" :value="3">除湿</el-option>
                  <el-option label="送风" :value="4">送风</el-option>
                </el-select>
                &nbsp;&nbsp;&nbsp;
              </span>
              <!-- 风速 -->
              <span v-if="scope.row.timelines[0].hasOwnProperty('wind_speed')">
                风速:
                <el-select
                  style="width: 55px"
                  v-model="scope.row.timelines[0].wind_speed"
                  placeholder="请选择"
                >
                  <el-option label="低" :value="1">低</el-option>
                  <el-option label="中" :value="2">中</el-option>
                  <el-option label="高" :value="3">高</el-option> </el-select
                >&nbsp;&nbsp;&nbsp;
              </span>
              <!-- RGBW -->
              <span v-if="scope.row.timelines[0].hasOwnProperty('red')">
                <el-popover placement="bottom" trigger="click">
                  <div class="rgbw">
                    <!-- R -->
                    <div>
                      R &nbsp;
                      <i
                        class="el-icon-arrow-left"
                        @click="delr(scope.row)"
                      ></i>
                      <el-input-number
                        style="width: 50px"
                        :max="255"
                        :min="0"
                        class="amendment"
                        v-model="scope.row.timelines[0].red"
                      ></el-input-number>
                      <i class="el-icon-arrow-right" @click="addr(scope.row)">
                      </i>
                    </div>
                    <!-- G -->
                    <div>
                      G &nbsp;
                      <i
                        class="el-icon-arrow-left"
                        @click="delg(scope.row)"
                      ></i>
                      <el-input-number
                        style="width: 50px"
                        :max="255"
                        :min="0"
                        :step="1"
                        class="amendment"
                        v-model="scope.row.timelines[0].green"
                      ></el-input-number>
                      <i class="el-icon-arrow-right" @click="addg(scope.row)">
                      </i>
                    </div>
                    <!-- B -->
                    <div>
                      B &nbsp;
                      <i
                        class="el-icon-arrow-left"
                        @click="delb(scope.row)"
                      ></i>
                      <el-input-number
                        style="width: 50px"
                        :max="255"
                        :min="0"
                        :step="1"
                        class="amendment"
                        v-model="scope.row.timelines[0].blue"
                      ></el-input-number>
                      <i class="el-icon-arrow-right" @click="addb(scope.row)">
                      </i>
                    </div>
                    <!-- W -->
                    <div>
                      w&nbsp;
                      <i
                        class="el-icon-arrow-left"
                        @click="delw(scope.row)"
                      ></i>
                      <el-input-number
                        style="width: 50px"
                        :max="255"
                        :min="0"
                        :step="1"
                        class="amendment"
                        v-model="scope.row.timelines[0].white"
                      ></el-input-number>
                      <i class="el-icon-arrow-right" @click="addw(scope.row)">
                      </i>
                    </div>
                    <!-- <el-button style="margin-top: 20px" type="primary"
                      >确 定1</el-button
                    > -->
                  </div>
                  <span slot="reference"
                    >RGBW( {{ scope.row.timelines[0].red }},
                    {{ scope.row.timelines[0].green }},
                    {{ scope.row.timelines[0].blue }},
                    {{ scope.row.timelines[0].white }})
                  </span>
                </el-popover>
              </span>
              <!-- 开合度 -->
              <span v-if="scope.row.timelines[0].hasOwnProperty('open_level')">
                开合度:
                <i class="el-icon-arrow-left" @click="delkhd(scope.row)"></i>
                <el-input-number
                  style="width: 40px"
                  :max="100"
                  :min="1"
                  :step="1"
                  v-model="scope.row.timelines[0].open_level"
                ></el-input-number>
                <i class="el-icon-arrow-right" @click="addkhd(scope.row)"> </i>
              </span>
            </template>
          </el-table-column>

          <el-table-column width="220">
            <template slot="header">
              <el-button type="primary" @click="editGroup">{{
                showxq ? "批量设置" : "设置"
              }}</el-button>
            </template>
            <template slot-scope="scope">
              <!-- 延时 -->
              <span v-if="scope.row.timelines[0].hasOwnProperty('time_delay')"
                >延时:
                <i class="el-icon-arrow-left" @click="delys(scope.row)"></i>
                <el-input-number
                  style="width: 40px"
                  :max="100"
                  :min="0"
                  :step="1"
                  v-model="scope.row.timelines[0].time_delay"
                ></el-input-number>
                <i class="el-icon-arrow-right" @click="addys(scope.row)"> </i
                >&nbsp;&nbsp;&nbsp;
              </span>
              <!-- 开关 -->
              <el-switch
                v-model="scope.row.timelines[0].on"
                :active-value="1"
                active-color="#409EFF"
                :inactive-value="0"
                inactive-color="#909399"
              >
              </el-switch>
            </template>
          </el-table-column>
          <!-- 复选框 -->
          <el-table-column
            v-if="showdel"
            fixed="right"
            width="65"
            type="selection"
          >
            <template slot="header"></template>
          </el-table-column>
        </el-table>
        <el-button
          style="position: fixed; left: 260px; bottom: 2%"
          @click="Returnprevious"
          >取消保存内</el-button
        >

        <div class="button">
          <el-button type="info" @click="del()">删除设备</el-button>
          <el-button type="primary" @click="addxqsb()">添加设备</el-button>
        </div>
      </div>
    </div>

    <div v-if="qzxz">
      <div class="structure">
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          class="eltab"
        >
          <el-tab-pane label="群组选择" name="first">
            <el-table
              style="width: 100%; font-size: 15px"
              :height="tableHeight2"
              border
              :header-cell-style="{
                'text-align': 'left',
                color: '#000',
                'border-color': '#ccffff',
                background: '#CCFFFF',
              }"
              :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
              :data="filteredData2"
              stripe
              responsive
              v-loading="loading"
              ref="qztable"
            >
              <el-table-column label="序号">
                <template slot-scope="scope">
                  <span v-if="scope.$index + 1 < 10">
                    00{{ scope.$index + 1 }}</span
                  >
                  <span v-if="scope.$index + 1 > 9">
                    0{{ scope.$index + 1 }}</span
                  >
                  <span v-if="scope.$index + 1 > 99">
                    {{ scope.$index + 1 }}</span
                  >
                </template>
              </el-table-column>

              <el-table-column prop="group_type_name">
                <template slot="header">
                  群组类型
                  <el-popover placement="bottom" trigger="click">
                    <SceneTypeinput @filterscene="filtersceneTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>

              <el-table-column prop="group_name"
                ><template slot="header">
                  群组名称
                  <el-popover placement="bottom" trigger="click">
                    <SceneNameinput
                      @filtergeneralname="filtergeneralnameTable2"
                    />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="title"
                ><template slot="header">
                  所在空间
                  <el-popover placement="bottom" trigger="click">
                    <!-- <SceneNameinput
                      @filtergeneralname="filtergeneralnameTable2"
                    /> -->
                    <SceneNameinput />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
                <template scope="scope">
                  <el-select
                    class="interspace"
                    disabled
                    style="width: 100%"
                    v-model="scope.row.group_area_id"
                    filterable
                    placeholder="--"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.area_id"
                      :label="item.name"
                      :value="item.area_id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column v-model="haspage" type="selection">
              </el-table-column>
            </el-table>
            <div
              class="bottom-left"
              style="position: fixed; left: 260px; bottom: 60px"
            ></div>
          </el-tab-pane>
          <el-tab-pane label="设备选择" name="second">
            <el-table
              :data="filteredData3"
              stripe
              border
              responsive
              ref="sbtable"
              :height="tableHeight2"
              :header-cell-style="{
                'text-align': 'left',
                color: '#000',
                'border-color': '#ccffff',
                background: '#CCFFFF',
              }"
              @selection-change="commonDevSelectionChange"
              :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
            >
              <el-table-column prop="date" label="序号">
                <template slot-scope="scope">
                  <span v-if="scope.$index + 1 < 10">
                    00{{ scope.$index + 1 }}</span
                  >
                  <span v-if="scope.$index + 1 > 9">
                    0{{ scope.$index + 1 }}</span
                  >
                  <span v-if="scope.$index + 1 > 99">
                    {{ scope.$index + 1 }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="dev_id">
                <template slot="header">
                  MAC
                  <el-popover placement="bottom" trigger="click">
                    <MACinput @filtermac="filtermacTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="dev_type_name">
                <template slot="header">
                  设备类型
                  <el-popover placement="bottom" trigger="click">
                    <FacilityTypeinput @filter="filterTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="address">
                <template slot="header">
                  群组名称
                  <i class="el-icon-caret-bottom"></i>
                </template>
              </el-table-column>
              <el-table-column prop="address1">
                <template slot="header">
                  所在空间
                  <el-popover placement="bottom" trigger="click">
                    <LocationSpaceinput @filterspace="filterspaceTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
                <template scope="scope">
                  <span>{{ scope.row.area.name || "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="gw_id">
                <template slot="header">
                  图位编号
                  <el-popover placement="bottom" trigger="click">
                    <MapNumberinput @filterposition="filterpositionTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>

              <el-table-column type="selection"> </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="fh">
          <el-button
            style="color: #000"
            type="text"
            @click="qzfh"
            icon="el-icon-back"
            >返回</el-button
          >
        </div>
        <el-button
          type="primary"
          @click="commonSceneSubmitPopupData()"
          style="position: fixed; bottom: 2%; right: 60px"
          >确 定2</el-button
        >
      </div>
    </div>
    <!-- 普通场景 -->
    <!-- <scene></scene> -->
  </div>
</template>
<script>
import SceneNameinput from "@/components/cominput/SceneNameinput.vue";
import MACinput from "@/components/cominput/MACinput.vue";
import MapNumberinput from "@/components/cominput/MapNumberinput.vue";
import FacilityTypeinput from "@/components/cominput/FacilityTypeinput.vue";
import SceneTypeinput from "@/components/cominput/SceneTypeinput.vue";
import LocationSpaceinput from "@/components/cominput/LocationSpaceinput.vue";
import Api from "@/api/api";

export default {
  components: {
    SceneNameinput,
    SceneTypeinput,
    MACinput,
    MapNumberinput,
    FacilityTypeinput,
    LocationSpaceinput,
  },
  inject: ["reload"],
  data() {
    return {
      activeName: "first",
      input: "",
      loading: false,
      selectedRows: [],
      scene_list: [],
      filteredData: [],
      DetailData: [],
      commonDevSelection: [],
      groupList: [],
      filteredData2: [],
      modifiedData: [],
      devEpList: [],
      haspage: [],
      list: [],
      filteredData3: [],
      sceneDetails: [],
      filteredData1: [],
      copySceneData: {},
      params1: 0,
      // params2: {
      //   on: null,
      //   target_temp: null,
      //   air_mode: null,
      //   wind_speed: null,
      //   brightness: null,
      //   red: 80,
      //   green: 90,
      //   blue: 155,
      //   white: 250,
      //   cct: null,
      //   open_level: null,
      //   time_delay: null,
      //   brightness_open_level: null,
      // },
      tableHeight: window.innerHeight - 150,
      tableHeight2: window.innerHeight - 300,
      createSceneData: {
        scene_name: "默认名称",
        type: 0,
        typeOptions: [
          {
            value: 0,
            label: "普通场景",
          },
          {
            value: 1,
            label: "时光场景",
          },
        ],
      },
      qzxz: false,
      showsbxq: false,
      showdel: false,
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      iconClick2: false,
      showxq: true,
      show: true,
      showtjsb: true,
      showptcj: false,
    };
  },
  mounted() {
    this.elpopover();
  },
  async created() {
    let res = await Api.query_areas({ params: { sid: this.localSid } });
    this.options = res.result.areas;
    let res1 = await Api.query_areas({
      params: { sid: this.localSid },
    });
    this.options = res1.result.areas;
    // console.log(this.options);
    let res2 = await Api.query_all_scene_detail_ex2({
      params: {
        sid: this.localSid,
      },
    });

    this.scene_list = res2.result.scene_list;
    this.filteredData = JSON.parse(JSON.stringify(this.scene_list));
    console.log("this.scene_list>>>>>>>>", this.scene_list);

    let res3 = await Api.query_all_group_detail({
      params: { sid: this.localSid },
    });
    this.group_list = JSON.parse(JSON.stringify(res3.result.group_list));
    this.group_list.forEach((x, idx, arr) => {
      // console.log(this.options);
      this.options.forEach((z) => {
        if (z.area_id == x.group_area_id) {
          arr[idx].group_area_name = z.name;
        }
      });
      x.group_devices.forEach((y) => {
        y.key = y.dev_id + y.ep;
      });
    });

    let res4 = await Api.query_all_group_detail({
      params: { sid: this.localSid },
    });
    this.groupList = res4.result.group_list;
    this.filteredData2 = JSON.parse(JSON.stringify(this.groupList));

    let res5 = await Api.exc({
      params: { sid: this.localSid },
    });
    this.list = res5.result.device_ep_list;
    this.filteredData3 = JSON.parse(JSON.stringify(this.list));
    console.log("设备选择的数据》", this.list);
    console.log("设备选择1234》", this.list);

    this.loading = false;
  },

  methods: {
    filtergeneralnameTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.scene_list));
      } else {
        this.filteredData = this.scene_list.filter((row) => {
          return row.scene_name.includes(keywords);
        });
      }
    },
    filtergeneralnameTable1(keywords) {
      if (keywords.trim() === "") {
        this.filteredData1 = JSON.parse(JSON.stringify(this.sceneDetails));
      } else {
        this.filteredData1 = this.sceneDetails.filter((row) => {
          return row.name.includes(keywords);
        });
      }
    },
    filtergeneralnameTable4(keywords) {
      if (keywords.trim() === "") {
        this.filteredData1 = JSON.parse(JSON.stringify(this.sceneDetails));
      } else {
        this.filteredData1 = this.sceneDetails.filter((row) => {
          return row.dev_type.includes(keywords);
        });
      }
    },
    filtersceneTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData2 = JSON.parse(JSON.stringify(this.groupList));
      } else {
        this.filteredData2 = this.groupList.filter((row) => {
          return row.group_type_name.includes(keywords);
        });
      }
    },
    filtergeneralnameTable2(keywords) {
      if (keywords.trim() === "") {
        this.filteredData2 = JSON.parse(JSON.stringify(this.groupList));
      } else {
        this.filteredData2 = this.groupList.filter((row) => {
          return row.group_name.includes(keywords);
        });
      }
    },
    filtermacTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData3 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData3 = this.list.filter((row) => {
          return row.dev_id.includes(keywords);
        });
      }
    },
    filterTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData3 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData3 = this.list.filter((row) => {
          return row.dev_type_name.includes(keywords);
        });
      }
    },
    filterspaceTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData3 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData3 = this.list.filter((row) => {
          return row.area.name.includes(keywords);
        });
      }
    },
    filterpositionTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData3 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData3 = this.list.filter((row) => {
          return row.gw_id.includes(keywords);
        });
      }
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
      console.log("点击本行获得本行的数据》", val);
    },
    elpopover() {
      this.$nextTick(() => {
        const popover = document.querySelector(".el-popover");
        if (popover) {
          popover.style.paddingLeft = "0";
          popover.style.paddingRight = "0";
        }
      });
    },
    // 亮度递增
    addld(row) {
      if (row.timelines[0].brightness < 255) {
        row.timelines[0].brightness++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    // 亮度递减
    delld(row) {
      if (0 < row.timelines[0].brightness) {
        row.timelines[0].brightness--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    // 温度递增
    addwd(row) {
      if (row.timelines[0].target_temp < 32) {
        row.timelines[0].target_temp++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    // 温度递减
    delwd(row) {
      if (16 < row.timelines[0].target_temp) {
        row.timelines[0].target_temp--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    // 延时递增
    addys(row) {
      if (row.timelines[0].time_delay < 100) {
        row.timelines[0].time_delay++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    // 延时递减
    delys(row) {
      if (0 < row.timelines[0].time_delay) {
        row.timelines[0].time_delay--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    // 透光度递增
    addtgd(row) {
      if (row.timelines[0].brightness_open_level < 100) {
        row.timelines[0].brightness_open_level++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    // 透光度递减
    deltgd(row) {
      if (1 < row.timelines[0].brightness_open_level) {
        row.timelines[0].brightness_open_level--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    // 色温递增
    addsw(row) {
      if (row.timelines[0].cct < 5000) {
        row.timelines[0].cct++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    // 色温递减
    delsw(row) {
      if (2700 < row.timelines[0].cct) {
        row.timelines[0].cct--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    // 开合度递增
    addkhd(row) {
      if (row.timelines[0].open_level < 100) {
        row.timelines[0].open_level++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    // 开合度递减
    delkhd(row) {
      if (1 < row.timelines[0].open_level) {
        row.timelines[0].open_level--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //R递增
    addr(row) {
      if (row.timelines[0].red < 255) {
        row.timelines[0].red++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //R递减
    delr(row) {
      if (0 < row.timelines[0].red) {
        row.timelines[0].red--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //G递增
    addg(row) {
      if (row.timelines[0].green < 255) {
        row.timelines[0].green++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //G递减
    delg(row) {
      if (0 < row.timelines[0].green) {
        row.timelines[0].green--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //B递增
    addb(row) {
      if (row.timelines[0].blue < 255) {
        row.timelines[0].blue++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //B递减
    delb(row) {
      if (0 < row.timelines[0].blue) {
        row.timelines[0].blue--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //W递增
    addw(row) {
      if (row.timelines[0].white < 255) {
        row.timelines[0].white++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //W递减
    delw(row) {
      if (0 < row.timelines[0].white) {
        row.timelines[0].white--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },

    // 阻止冒泡事件（忽略）
    cc() {},

    async saved(row) {
      this.modifiedData = row.timelines[0];
      console.log("this.modifiedData>", this.modifiedData);
    },
    //修改场景参数
    async SaveChanges() {
      const loading = this.$loading({
        lock: true,
        text: "保存中,请稍等片刻. . .",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let commonCurrentData1 = JSON.parse(JSON.stringify(this.DetailData));

      commonCurrentData1.actions.forEach((x) => {
        if (x.timelines[0].target_temp) {
          x.timelines[0].target_temp *= 10;
        }
      });
      for (let i = 0; i < commonCurrentData1.actions.length; i++) {
        if (
          commonCurrentData1.actions[i].timelines.find(
            (el) => el.action_id == this.modifiedData.action_id
          )
        ) {
          commonCurrentData1.actions[i].timelines = [this.modifiedData];
        }
      }

      commonCurrentData1.fade_time *= 10;
      await Api.strict_save_scenes_detail_ex2({
        params: {
          sid: this.localSid,
          scene_list: [commonCurrentData1],
        },
      });
      loading.close();
      this.reload();
    },
    // 创建群组
    async establish() {
      await Api.add_scene({
        params: {
          sid: this.localSid,
          scene_name: this.createSceneData.scene_name,
          type: this.createSceneData.type,
        },
      });
      this.reload();
      this.$message({
        showClose: true,
        type: "success",
        message: "创建成功",
      });
    },
    // 删除场景
    async deleteColumns() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.selectedRows.forEach(async (row) => {
            await Api.delete_scene({
              params: { sid: this.localSid, scene_id: row.scene_id },
            });
          });
          this.loading = false;
          this.reload();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 执行设备
    async execScene(row) {
      await Api.exec_scene({
        params: {
          sid: this.localSid,
          group_id: 0,
          scene_id: row.scene_id,
        },
      });

      this.$message({
        type: "success",
        message: "执行成功",
      });
    },

    // 操作
    saveGroup() {
      this.show = !this.show;
      if (this.show) {
        this.$message({
          type: "success",
          message: "保存成功!",
        });
      }
    },
    // 点击跳转添加设备界面
    async addsb(row) {
      let devEpList = await Api.exc({
        params: { sid: this.localSid },
      });
      this.devEpList = devEpList.result.device_ep_list;
      if (row.type == 0) {
        this.DetailData = JSON.parse(JSON.stringify(row));
        console.log("跳转界面的数据》", this.DetailData);
        this.DetailData.fade_time /= 10;
        for (let i = 0, len = this.DetailData.actions.length; i < len; i++) {
          this.DetailData.actions[i].properties = [];
          this.devEpList.forEach((x) => {
            if (
              this.DetailData.actions[i].dev_id == x.dev_id &&
              this.DetailData.actions[i].ep == x.ep_id
            ) {
              this.DetailData.actions[i].properties = x.properties;
            }
          });

          if (this.DetailData.actions[i].timelines[0].target_temp) {
            this.DetailData.actions[i].timelines[0].target_temp /= 10;
          }
        }
      }

      this.sceneDetails = row.actions;
      this.filteredData1 = JSON.parse(JSON.stringify(this.sceneDetails));
      this.SceneName = row.scene_name;
      // this.deviceNum = row.length;
      console.log("点击详情获得跳转界面的数据》", row);

      this.showtjsb = !this.showtjsb;
      this.showsbxq = !this.showsbxq;
    },
    // 取消保存
    cancelSave() {
      this.show = true;
    },
    // 返回主页面
    Returnprevious() {
      this.show = true;
      this.showtjsb = !this.showtjsb;
      this.showsbxq = !this.showsbxq;
    },
    // 删除设备
    del() {
      this.showdel = !this.showdel;
    },
    // 添加设备
    addxqsb() {
      this.qzxz = !this.qzxz;
      this.showsbxq = !this.showsbxq;
      console.log("详情里面的数据", this.sceneDetails);
      console.log("群组选择里面的数据", this.groupList);

      this.$nextTick(() => {
        for (let i = 0; i < this.filteredData3.length; i++) {
          let dev_id = this.filteredData3[i].dev_id;
          let ep_id = this.filteredData3[i].ep_id;
          this.sceneDetails.forEach((el) => {
            if (dev_id == el.dev_id && ep_id == el.ep) {
              this.$refs.qztable.toggleRowSelection(
                this.filteredData3[i],
                true
              );
            }
          });
        }
      });

      this.$nextTick(() => {
        for (let i = 0, len = this.filteredData3.length; i < len; i++) {
          let dev_id = this.filteredData3[i].dev_id;
          let ep_id = this.filteredData3[i].ep_id;
          this.sceneDetails.forEach((el) => {
            if (dev_id == el.dev_id && ep_id == el.ep) {
              this.$refs.sbtable.toggleRowSelection(
                this.filteredData3[i],
                true
              );
            }
          });
        }
      });
    },
    // 修改中所在空间
    async changeDevInfo(row) {
      row.sid = this.localSid;
      await Api.update_scene({ params: row });
      this.$message({
        type: "success",
        message: "修改成功",
      });
    },
    // 修改场景名称
    async changeSceneName(row) {
      row.sid = this.localSid;
      await Api.update_scene({ params: row });
      this.$message({
        type: "success",
        message: "修改成功",
      });
    },
    // 设置/批量设置
    editGroup() {
      this.showdel = !this.showdel;
    },
    // 复选框选中的数据
    commonDevSelectionChange(val) {
      this.commonDevSelection = val;
      console.log("点击了复选框", this.commonDevSelection);
    },
    // 添加设备的确定
    async commonSceneSubmitPopupData() {
      this.newActions = JSON.parse(JSON.stringify(this.commonDevSelection));

      console.log("this.newActions》》", this.newActions);
      this.newActions.forEach((el) => {
        el.ep = el.ep_id;
        let obj = {};
        if (el.properties.find((el) => el.cmd_name == "air_mode")) {
          this.$set(obj, "air_mode", 1);
        }
        if (el.properties.find((el) => el.cmd_name == "wind_speed")) {
          this.$set(obj, "wind_speed", 2);
        }
        if (el.properties.find((el) => el.cmd_name == "brightness")) {
          this.$set(obj, "brightness", 127);
        }
        if (el.properties.find((el) => el.cmd_name == "red")) {
          this.$set(obj, "red", 127);
        }
        if (el.properties.find((el) => el.cmd_name == "green")) {
          this.$set(obj, "green", 127);
        }
        if (el.properties.find((el) => el.cmd_name == "blue")) {
          this.$set(obj, "blue", 127);
        }
        if (el.properties.find((el) => el.cmd_name == "white")) {
          this.$set(obj, "white", 127);
        }
        if (el.properties.find((el) => el.cmd_name == "cct")) {
          this.$set(obj, "cct", 127);
        }
        if (el.properties.find((el) => el.cmd_name == "open_level")) {
          this.$set(obj, "open_level", 50);
        }
        if (el.properties.find((el) => el.cmd_name == "target_temperature")) {
          this.$set(obj, "target_temp", 26);
        }
        if (el.properties.find((el) => el.cmd_name == "time_delay")) {
          this.$set(obj, "time_delay", 0);
        }
        if (el.properties.find((el) => el.cmd_name == "switch")) {
          this.$set(obj, "on", 1);
        }
        if (el.properties.find((el) => el.cmd_name == "brightness_level")) {
          this.$set(obj, "brightness_open_level", 50);
        }
        this.DetailData.actions = this.sceneDetails;
        this.$set(obj, "time", 0);
        el.timelines = [obj];
        this.DetailData.actions.forEach((e) => {
          if (el.dev_id == e.dev_id) {
            if (el.ep == e.ep) {
              el.timelines = e.timelines;
            }
          }
        });
      });

      this.DetailData.actions = this.newActions;
      this.qzfh();
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    tz(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 群组返回
    qzfh() {
      // this.showtjsb = !this.showtjsb;
      this.showsbxq = !this.showsbxq;
      this.qzxz = !this.qzxz;
    },
    // 复制
    async duplicate(row) {
      console.log("复制行的内容>>", row);
      this.loading = true;
      this.copySceneData = JSON.parse(JSON.stringify(row));
      this.copySceneData.scene_name = row.scene_name;
      this.copySceneData.scene_id = null;

      this.copySceneData.sid = this.localSid;
      let res = await Api.add_scene({ params: this.copySceneData });
      console.log("this.copySceneData>>>>", this.copySceneData);
      this.copySceneData.scene_id = res.result.scenes[0].scene_id;
      this.$message({
        type: "warning",
        message: "复制时间可能会较长,请耐心等待",
      });
      await Api.strict_save_scenes_detail_ex2({
        params: {
          sid: this.localSid,
          scene_list: [this.copySceneData],
        },
      });
      this.reload();
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>
<style lang="scss" scoped>
.structure {
  width: 98%;
  height: calc(100vh - 80px);
  margin-left: 20px;

  ::v-deep .is-active {
    text-align: center;
    color: aliceblue;
    background: #2559c0 !important;
    border-radius: 1px !important;
  }

  /* 去除滚动条 */
  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }
  ::-webkit-scrollbar {
    display: none;
  }
}
.hzding {
  width: 98%;
  height: 10%;
}
.button {
  position: fixed;
  right: 3%;
  bottom: 2%;
}

.pbq {
  font-size: 14px;
  float: left;
  margin-top: 20px;
  color: darkgray;
}

.input {
  margin-top: 20px;
}

::v-deep .el-input__inner {
  background-color: #f7f7f7;
  outline: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.rgbw {
  text-align: center;
  ::v-deep .el-input__inner {
    padding: 0 0 0 0;
    background-color: #f8f8fa;
    // padding: 5px;
    border: none;
  }
}

.qxqr {
  margin-top: 20px;
  float: right;
}

.jdzj {
  width: 50%;
}

.ydfw {
  margin-top: 45px;
}

.ydfw1 {
  margin-left: -470px;
}

.bybtn {
  margin-left: 300px;
}

// 去除计数器的+ -
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
  display: none;
}

.czdiv {
  display: inline-block;
}

.fh {
  position: fixed;
  right: 40px;
  top: 90px;
}
.cjdiv {
  width: 100%;
  height: calc(100vh - 80px);
  user-select: none; //解决多点击选中问题
  .mianConntent {
    width: 98%;
    display: flex;
    margin-left: 20px;
    box-sizing: border-box;
    .sgcj {
      ::v-deep .el-input.is-disabled .el-input__icon {
        display: none;
      }
      ::v-deep .el-input.is-disabled .el-input__inner {
        // border-color: aqua;
        width: 70px;
        padding: 0 0 0 0;
        color: #666060;
        border: #ffffff;
        cursor: default;
        background: #ffffff00;
      }
    }
  }
  // 列表的下拉样式
  .interspace {
    ::v-deep .el-input.is-disabled .el-input__icon {
      display: none;
    }
    ::v-deep .el-input.is-disabled .el-input__inner {
      width: 70px;
      padding: 0 0 0 0;
      color: #666060;
      border: #ffffff00;
      cursor: default;
      background: #ffffff00;
    }
  }

  /* 去除滚动条留白 */
  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }
  // 去除滚动条
  ::-webkit-scrollbar {
    display: none;
  }

  .tbs {
    width: 100%;
    margin-left: 20px;
    .noe {
      // float: left;
      ::v-deep .el-input__inner {
        background-color: #f8f8fa;
        padding: 5px;
        border: none;
      }

      input {
        text-align: center;
        margin-top: 10px;
        width: 30px;
        // font-size: 20px;
        outline: none;
        border: none;
      }
    }
  }
}
</style>
